<template>
  <!--已就诊的查看详情 -->
  <el-row>
    <el-col :span="22" :offset="1">

      <!--卡片shart-->
      <el-card class="box-card" style="padding: 0 15px;">

        <div  style="display:inline-block; *display:inline; zoom:1;">
          <font style="float: left" size="4"><b>查看挂号信息</b></font>
          <el-button style="float: right" size="small" @click="returnFun">返回</el-button>
          <el-button type="primary" style="float: right" size="small" @click="tuihao">退号</el-button><br/><br/>
          <font style="float: left" size="5" color="blue" ><b>订单信息</b></font>
          <br/><br/><br/>
          <!--<el-table
            :data="tableData1"
            style="width: 100%"
            row-key="id"
            border
            lazy
            :load="load"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column
              prop="id"
              label=" 订单编号：201909090001"
              width="220">
            </el-table-column>
            <el-table-column
              prop="money"
              label="应收金额（元）：60.00"
              width="220">
            </el-table-column>
            <el-table-column
              prop="ymoney"
              label="优惠金额（元）：-20"
              width="220">
            </el-table-column>
            <el-table-column
              prop="pay"
              label=" 医保支付（元）：30"
              width="220">
            </el-table-column>
            <el-table-column
              prop="smoney"
              label="实收金额（元）：10.00"
              width="220">
            </el-table-column>
          </el-table>-->
          <el-table
            :data="tableData1"
            style="width: 100%"
            row-key="id"
            border
            lazy
            :load="load"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column
              prop="id"
              label=" 订单编号：201909090001"
              width="220">
            </el-table-column>
            <el-table-column
              prop="money"
              label="应收金额（元）：60.00"
              width="220">
            </el-table-column>
            <el-table-column
              prop="ymoney"
              label="优惠金额（元）：-20"
              width="220">
            </el-table-column>
            <el-table-column
              prop="pay"
              label=" 医保支付（元）：30"
              width="220">
            </el-table-column>
            <el-table-column
              prop="smoney"
              label="实收金额（元）：10.00"
              width="220">
            </el-table-column>
          </el-table>

          <br>   <br>

          <font style="float: left" size="5" color="blue"><b>挂号信息</b></font>
          <br/><br/><br/><br/>
          <el-table
            :data="tableData2"
            style="width: 100%"
            row-key="id"
            border
            lazy
            :load="load"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column
              prop="keshi"
              label="挂号科室：全科"
              width="220">
            </el-table-column>
            <el-table-column
              prop="zhenduan"
              label="接诊类型：初诊"
              width="220">
            </el-table-column>
            <el-table-column
              prop="doctor"
              label="接诊医生：韩政"
              width="220">
            </el-table-column>
            <el-table-column
              prop="guahaofei"
              label="  挂号费（元）：10.00"
              width="220">
            </el-table-column>
            <el-table-column
              prop="zhenliaofei"
              label=" 诊疗费（元）：50.00"
              width="220">
            </el-table-column>
          </el-table>

          <font style="float: left" size="5" color="blue"><b>患者信息</b></font>
          <br/><br/><br/>
          <font style="float: left" size="3">患者姓名</font>
          <br/><br/>

          <div class="width4">
            <div class="name">
              <el-input
                placeholder="王蒙"
                v-model="input"
                :disabled="true" >
              </el-input>
            </div>
          </div>

          <div class="name1">
            <div class="ng1"><font style="float: left" size="3">患者卡号</font></div>
            <el-input
              placeholder=""
              v-model="input"
              :disabled="true" class="width1">
            </el-input>
          </div>

          <div class="name2">
            <div class="age"><font style="float: left" size="3">患者年龄</font></div>
            <el-input placeholder="请输入内容" v-model="input3" class="width1">
              <el-select v-model="select" slot="append" placeholder="请选择">
                <el-option label="岁" value="1"></el-option>
                <el-option label="月" value="2"></el-option>
                <el-option label="天" value="3"></el-option>
              </el-select>
            </el-input>
          </div>



          <div class="name3">
            <div class="birth"><font style="float: left" size="3">出生日期</font></div>
            <el-date-picker
              v-model="value1"
              type="date"
              placeholder="选择日期" style="float: left">
            </el-date-picker>
          </div>

          <br/>  <br/>  <br/> <br/>
          <font style="float: left" size="3">性别</font>
          <br/><br/>


          <el-select v-model="sex" placeholder="请选择" style="float: left">
            <el-option
              v-for="item in sexOptions"
              :key="item.sex"
              :label="item.label"
              :value="item.sex">
            </el-option>



          </el-select>
          <div class="phone">
            <div class="phone1"><font style="float: left" size="3">手机号码</font></div>
            <el-input v-model="input" placeholder="请输入手机号码" class="width1"></el-input>
          </div>

          <div class="number">
            <div class="phone2"><font style="float: left" size="3">证件号码</font></div>
            <el-input v-model="input" placeholder="请输入证件号码" class="width1"></el-input>
          </div>


          <br><br><br><br><br><br>


          <div class="address">
            <div class="address1"><font style="float: left" size="3">地址</font></div>
            <span class="demonstration"></span>
            <el-cascader
              placeholder="请选择地址"
              :options="options"
              filterable style="float: left"></el-cascader>
          </div>

          <el-input v-model="input" placeholder="请输入详细地址" class="width2"></el-input>

          <br><br>

          <div class="bei">
            <div class="bei1"><font style="float: left" size="3">备注</font></div>
            <el-input v-model="input" placeholder="" class="width3"></el-input>
          </div>
        </div>

      </el-card>

    </el-col>
  </el-row>

  <!--<el-container>

    <el-header>

      <font style="float: left" size="5"><b>挂号记录</b></font>


    </el-header>

    <el-main>


    </el-main>
  </el-container>-->
</template>




<script>
  export default {
    name: "chakangguahaoxinxi",
    methods: {
      returnFun: function () {
        this.$router.push("/registration")
      },
      data() {
        return {
          tableData1: [{
            id: '支付方式：微信支付',
            money: '找零（元）：0.00元',
            ymoney: '收费日期：2019-12-11 10:45:12',
            pay: '收费员：林鹤',
            smoney: ''
          }],
          keshiOptions: [{
            keshi: '选项1',
            label: '全科'
          }, {
            keshi: '选项2',
            label: '骨科'
          }, {
            keshi: '选项3',
            label: '儿科'
          }, {}],
          keshi: '',


          aOptions: [{
            a: '选项1',
            label: '初诊'
          }, {
            a: '选项2',
            label: '复诊'
          }, {}],
          a: '',

          bOptions: [{
            b: '选项1',
            label: '韩政'
          }, {
            b: '选项2',
            label: '田立杰'
          }, {}],
          b: '',

          sexOptions: [{
            sex: '选项1',
            label: '男'
          }, {
            sex: '选项2',
            label: '女'
          }, {}],
          sex: '',


          value: '',

          input: '',

          input3: '',


          pickerOptions: {
            disabledDate(time) {
              return time.getTime() > Date.now();
            },
            shortcuts: [{
              text: '今天',
              onClick(picker) {
                picker.$emit('pick', new Date());
              }
            }, {
              text: '昨天',
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24);
                picker.$emit('pick', date);
              }
            }, {
              text: '一周前',
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', date);
              }
            }]
          },
          value1: '',
          value2: '',


          options: [{
            value: 'beijing',
            label: '北京',
            children: [{
              value: 'zhixiashi',
              label: '直辖市',
            }, {}]
          }, {
            value: 'shanghai',
            label: '上海',
            children: [{
              value: 'zhixiashi',
              label: '直辖市',
            }, {}]
          }],

        }
      }
    }
  }
</script>

<style scoped>


  .width1{
    width:20%;
    float: left;
  }
  .width2{
    width:40%;
    float: left;
  }


  .width3{
    width:60%;
    float: left;
  }

  .bei{
    position:relative;
    top:30px;
  }
  .name{
    position:relative;
    float: left;

  }
  .name1{
    position:relative;
    right:50px;
  }
  .name2{
    position:relative;
    right:60px;
  }
  .name3{
    position:relative;
    right:40px;
  }
  .ng1{
    position:relative;
    right:-90px;
    top: -32px;
  }
  .phone {
    position: relative;
    position: relative;
    right: 60px;
  }


  .age{
    position:relative;
    left: 90px;
    top:-40px;
  }
  .birth{
    position:relative;
    left: 60px;
    top:-40px;
  }
  .phone1 {
    position: relative;
    left: 90px;
    top: -40px;
  }
  .number{
    position: relative;
    right: 70px;
  }
  .phone{
    position:relative;
    right: 50px;
  }
  .phone2{
    position: relative;
    left: 90px;
    top: -40px;
  }
  .address{
    position:relative;
    right: 30px;
  }
  .address1{
    position: relative;
    left: 30px;
    top: -40px;
  }
  .bei1{
    position: relative;
    left: -700px;
    top: -10px;
  }
</style>
